<template>
    <el-container class="category-view panel-block">
      <el-header class="sa-header">
        <div class="sa-title sa-flex sa-row-between">
          <div class="label sa-flex">
            <span class="left">商品分类</span>
            <search-condition
              :conditionLabel="filterParams.conditionLabel"
              @deleteFilter="deleteFilter"
            ></search-condition>
          </div>
          <div>
            <el-button class="sa-button-refresh" icon="RefreshRight" @click="getData()"></el-button>
            <el-button class="sa-button-refresh" icon="Search" @click="openFilter"></el-button>
            <el-button v-auth="'shop.admin.category.add'" type="primary" icon="Plus" @click="addRow"
              >添加</el-button
            >
          </div>
        </div>
      </el-header>
      <el-main class="sa-p-0" v-loading="loading">
        <el-table height="100%" :data="table.data" @row-dblclick="editRow" class="sa-table" stripe>
          <template #empty>
            <sa-empty />
          </template>
          <el-table-column prop="id" label="ID" min-width="80"></el-table-column>
          <el-table-column prop="name" label="分类名称" min-width="100">
            <template #default="scope">
              <div class="sa-table-line-1">{{ scope.row.name || '-' }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="style" label="分类样式" min-width="100">
            <template #default="scope">
              <div>
                <el-popover placement="right-start" title :width="236" trigger="hover">
                  <template #reference>
                    <img
                      :src="'./static/images/shop/category/' + scope.row.style + '.png'"
                      class="type-img"
                    />
                  </template>
                  <div class="hover-img">
                    <img :src="'./static/images/shop/category/' + scope.row.style + '.png'" />
                  </div>
                </el-popover>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="weigh" label="权重" min-width="100">
            <template #default="scope">
              <div class="sa-table-line-1">{{ scope.row.weigh || '0' }}</div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="scope">
              <template v-if="scope.row.id">
                <el-button
                  v-auth="'shop.admin.category.detail'"
                  class="is-link"
                  type="primary"
                  @click="editRow(scope.row)"
                  >编辑</el-button
                >
                <el-popconfirm
                  width="fit-content"
                  confirm-button-text="确认"
                  cancel-button-text="取消"
                  title="确认删除这条记录?"
                  @confirm="deleteRow(scope.row.id)"
                >
                  <template #reference>
                    <el-button v-auth="'shop.admin.category.delete'" class="is-link" type="danger">
                      删除
                    </el-button>
                  </template>
                </el-popconfirm>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </template>
  <script>
    export default {
      name: 'shop.admin.category',
    };
  </script>
  <script setup>
    import { onMounted, reactive, ref } from 'vue';
    import { api } from '@/app/shop/admin/category/category.service';
    import { useModal } from '@/sheep/hooks';
    import { useSearch } from '@/sheep/components/sa-table/sa-search/useSearch';
    import { composeFilter } from '@/sheep/utils';
    import CategoryEdit from './edit.vue';
    import { cloneDeep } from 'lodash';
  
    const filterParams = reactive({
      // 搜索自定义工具
      tools: {
        name: {
          type: 'tinput',
          field: 'name',
          value: '',
          label: '分类名称',
          placeholder: '请输入查询内容',
        },
      },
      data: {
        name: '',
      },
      conditionLabel: {},
    });
    const { openFilter, deleteFilter } = useSearch({ filterParams, getData });
  
    // 表格状态
    const table = reactive({
      data: [],
      search: {},
    });
    const loading = ref(true);
    // 获取数据
    async function getData() {
      loading.value = true;
      let tempSearch = cloneDeep(filterParams.data);
      let search = composeFilter(tempSearch, {
        name: 'like',
      });
      const { error, data } = await api.list({
        ...search,
      });
      error === 0 && (table.data = data);
      loading.value = false;
    }
  
    function addRow() {
      useModal(
        CategoryEdit,
        { title: '添加分类', type: 'add' },
        {
          confirm: () => {
            getData();
          },
        },
      );
    }
    function editRow(row) {
      useModal(
        CategoryEdit,
        {
          title: '编辑',
          type: 'edit',
          id: row.id,
        },
        {
          confirm: () => {
            getData();
          },
        },
      );
    }
    async function deleteRow(id) {
      await api.delete(id);
      getData();
    }
  
    onMounted(() => {
      getData();
    });
  </script>
  <style lang="scss" scoped>
    .category-view {
    }
    .type-img {
      width: 32px;
      height: 32px;
    }
    .hover-img {
      width: 220px;
      height: 350px;
      display: flex;
    }
  </style>
  